<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图位置</title>
    <script type='text/javascript' src='./lib/jsmap/jsmap_light.js'></script>
    <link type="text/css" href="./lib/jsmap/jsmap_light.css" rel="stylesheet"/>
    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
</head>
<body>

<!--<div class="container">-->

<div id="mapContainer">
    <!-- <div class="back" onclick="back()">
        <img class="back_img" src="image/arrow_time_left.png">
    </div> -->
    <!-- <div id="input_container" class="input" onclick="input_click()">
        <span class="radius-label">半径:</span><input id="input_radius" type="number" name="quantity" placeholder="请输入半径" value="15" class="radius"><span class="radius-label">米</span>
    </div> -->
    <div id="id_tip" class="tip">
        <span class="tip-content">jpg地图缺失，请联系实施工程师</span>
    </div>
    <!-- <div id="operation_layout" class="operation_layout">
        <div id="v_btn" class="btn" onclick="leftBtnClicked()">
            开始画
        </div>
        <div id="re_paint_btn" class="btn" onclick="rightBtnClicked()">
            重画
        </div>
    </div> -->
</div>

<!--</div>-->
</body>


</html>

<script>


	let icon = ""

    let maxFloors = 5;

    let drawTool;
    let currentDrawMode;

    var currentFloorId = -99;

    var singlePoint = null;
    var singleResult = null;

    var pointList = [];
    var pointListResult = [];

    var mapConfig = {};

    var markerAdded;
    var lineMarkerAdded;
    var boxMarkerAdded;
    var circleMarkerAdded;

    // 0 刚进来 1 开始画了 2 结束了也就是画好了 3 查看进来 也就是画好了 但是只显示重画
    var status = 0;

    var markWay;

    var buildId = getQueryString("buildId");
    let pointsParamsStr = getQueryString("pointList");


    var mapServer = getQueryString("mapServer");
    if (getQueryString('mapConfig')) {
        var mapConfig = JSON.parse(getQueryString('mapConfig'))
    }

    if (mapConfig) {
        markWay = mapConfig.markWay;
        console.log(markWay);
        // markWay = "addPoint";
        // markWay = "drawPolygon";
        console.log(status);

        if (pointsParamsStr) {
            let pointListEntity = JSON.parse(pointsParamsStr);
            if(markWay === 'addPoint'){
                console.log(pointListEntity);
                if(pointListEntity){
                    singlePoint = new jsmaplight.JSPoint(pointListEntity.x, pointListEntity.y, 0);
                    // for(let i = 0;i < pointListEntity.length;i++){
                    //     let point = pointListEntity[i];
                    //     pointList.push(new jsmaplight.JSPoint(point.x, point.y, 0));
                    // }
                }
                singleResult = pointListEntity;
                if (singleResult) {
                    currentFloorId = singleResult.floorId;
                    let radius = singleResult.radius;
                    if(!radius){
                        radius = 5;
                    }
                    document.getElementById("input_radius").value = radius;
                    console.log('------设置currentFloorId' + currentFloorId);
                    status = 3;
                }
            }else{
                if(pointListEntity.points && pointListEntity.points.length > 0){
                    for(let i = 0;i < pointListEntity.points.length;i++){
                        let point = pointListEntity.points[i];
                        pointList.push(new jsmaplight.JSPoint(point.x, point.y, 0));
                    }
                }
                pointListResult = pointListEntity.points;
                console.log(pointListResult);
                if (pointListResult && pointListResult.length > 0) {
                    currentFloorId = pointListResult[0].floorId;
                    console.log('------设置currentFloorId' + currentFloorId);
                    status = 3;
                }
            }
        }
    }


    fetchJson();


    var map = new jsmaplight.JSMap({
        container: 'mapContainer',
        mapServerURL: mapServer,
        mapScaleLevelRange: [15, 24], // 比例尺级别范围， 16级到23级,默认[1,24]
        defaultMapScaleLevel: 20 // 比例尺级别设置为19级

    });
    console.log("buildId",buildId);
    map.openMapById(buildId,{
        focusFloorId: currentFloorId === -99 ? 1 : currentFloorId
    });

    map.on('loadComplete', function() {
        var floorControl = new jsmaplight.JSFloorControl({
            position: jsmaplight.JSControlPosition.RIGHT_BOTTOM,//控件位置
            showBtnCount: maxFloors,//最大显示楼层按钮数量
            offset: {
                x: 30,
                y: 20
            }//控件偏移位置
        });
        map.addControl(floorControl);

        var zoomControl= new jsmaplight.JSZoomControl({
            position: jsmaplight.JSControlPosition.LEFT_BOTTOM,//控件位置
            offset: {
                x: 30,
                y: 20
            }//控件偏移位置
        });
        map.addControl(zoomControl);

        // 地图缩放级别变化事件，返回当前level和上一个level值，level范围为1-24
        map.on('mapScaleLevelChanged', (last, current) => {
            console.log(last + ',' + current);
        });

        // initDrawToolMode1();



        // initDrawToolMode2();

        // getDomByClass();
        //
        // getUp();
        // getDown();
        map.on('mapClickNode', event => {
            if(event.properties){
                let sn = event.properties.get("sn");
                if(sn && sn.length > 0){
                    console.log("点击了marker");
                    document.location = "js://webview?arg1=111&args2=222";
                }
            }
            console.log(event.nodeType);
            console.log(event.node.text);
            console.log(event.eventInfo);
            console.log(event.properties.get("sn"));
            console.log(event.text);
            console.log(event.properties);
            console.log('mapClickNode',JSON.stringify(event.eventInfo));
        });

        //"x":118.98780313761365,"y":33.36570709155224
        // setTimeout(()=>{
        //     // addImageMarkers([{"lng":118.98780313761365,"lat":33.36570709155224}]);
        //     addLineMarkers();
        // },2000)
        // addLineMarkers();
    });

    function addPointMarker(event) {
        var pointMarker = new jsmaplight.JSPointMarker({
            color: '#00FF00',
            size: 10,
            position: new jsmaplight.JSPoint(event.eventInfo.coord.x, event.eventInfo.coord.y, event.eventInfo.coord.z),
            floorId: event.eventInfo.coord.floorId,
            outlineColor: '#CD5C5C',
            outlineWidth: 2,
            show: true,
            properties: {
                type: 0
            },
            callback: (node) => {
                console.log(node);
            }
        });
        map.addMarker(pointMarker);
    }


    function addLineMarker(event) {
        var lineMarker = new jsmaplight.JSLineMarker({
            id: 'line',//id
            position: pointList,//坐标几何
            width: 10,//线宽
            floorId: event.eventInfo.coord.floorId,
            color: '#4058ff',//填充颜色
            properties: {
                test: 0
            },//属性设置
            callback: (marker) => {
                console.log(marker);
            }//回调
        });
        map.addMarker(lineMarker);
    }

    function addImageMarker(floorId) {
        // console.log(JSON.stringify(singlePoint));
        // singlePoint._x = 105.19788999041336;
        // singlePoint._y = 37.64897859372846;
        console.log(JSON.stringify(singlePoint));
        var imagerMarker = new jsmaplight.JSImageMarker({
            id: 'iamgeMareker1',
            image: icon,
            position: new jsmaplight.JSPoint(105.20276069641115, 37.65090284094383, 0),
            width: 32,
            height: 32,
            floorId: floorId,
            show: true,
            properties: {
                name: 'test'
            },
            callback: (node) => {
                console.log(node);
            }
        });
        if(markerAdded){
            map.removeAllImageMarker();
        }
        map.addMarker(imagerMarker);
        markerAdded = imagerMarker;
    }

    function addImageMarkers(positions){
        map.removeAllMarker();
        for(let i = 0; i < positions.length;i++){
            var imagerMarker = new jsmaplight.JSIconTextMarker({
                id: "icon",
                image: positions[i].icon,
                text:positions[i].name,
                position: new jsmaplight.JSPoint(positions[i].lng, positions[i].lat, 0),
                imageWidth: 16,
                imageHeight: 16,
                floorId: 1,
                font: '12px 微软雅黑',//字体
						fontColor: '#fff',//文字颜色
						fontStrokeColor: '#fff', //字体描边颜色
						fontStrokeWidth: 1, //字体描边宽度
						backgroundColor: 'rgba(0,0,0,0.3)', //背景色颜色
						backgroundRadius: 1, // 背景圆角
						backgroundStrokeColor: 'rgba(0,0,0,0.3)', //背景边线颜色
						backgroundStrokeWidth: 1, //背景边线宽度
						iconTextType: jsmaplight.JSIconTextType.TOPTEXT_BOTTOMICON,
                        properties: {
                            name: 'iconText1',
                            sn:positions[i].sn
                        },//属性
                        callback: (marker) => {
                            // console.log(marker.floorId,marker.properties.name,marker.text)
                        }//回调
                });
            map.addMarker(imagerMarker);
        }
    }

    function addPloygonMarker(floorId){
        var polygonMarker = new jsmaplight.JSPolygonMarker({
            id: 'polygon',//id
            position: pointList,//坐标集合
            floorId: floorId,//楼层id
            color: 'rgba(255,255,255,0.52)',//填充颜色
            strokeColor: '#0000FF',//边线颜色
            properties: {
                test: 'polygonTest'
            },//属性设置
            callback: (marker) => {
                console.log(marker);
            }//回调
        });
        if(boxMarkerAdded){
            map.removeAllPolygonMarker();
        }
        map.addMarker(polygonMarker);
        boxMarkerAdded = polygonMarker;
    }

    function addCircleMarker(floorId) {
        var circleMarker = new jsmaplight.JSCircleMarker({
            position: singlePoint,
            radius: 15,
            floorId: floorId,
            color:'rgba(0,255,255,0.52)',
            callback: (node) => {
                console.log(node);
            }
        });
        if(circleMarkerAdded){
            map.removeMarker(circleMarkerAdded);
        }
        map.addMarker(circleMarker);
        circleMarkerAdded = circleMarker;
    }

    // function getDomByClass() {
    //     let xxx = "jsmap2d-bar";
    //     let dom = document.getElementsByClassName(xxx);
    //     console.log("==~~==~~==~~==~~==~~==~~==~~==~~==~~");
    //     console.log(dom);
    //     if (dom && dom.length > 0) {
    //         let originHeight = dom[0].style.height;
    //         console.log("originHeight",dom[0].offsetHeight);
    //         // if(isArrowExist()){
    //         //     dom[0].style.height = 90 * maxFloors + "px";
    //         // }else{
    //         //     dom[0].style.height = dom[0].offsetHeight * 1 + "px";
    //         // }
    //         dom[0].style.background = "#f3f2f3";
    //         console.log("==~~==~~==~~==~~==~~==~~==~~==~~==~~");
    //     }

    // }

    // function getUp() {
    //     let x = "jsmap2d-up-arrow";
    //     let dom = document.getElementsByClassName(x);
    //     console.log("==~~==~~==~~==~~==~~==~~==~~==~~==~~");
    //     console.log(dom);
    //     if(dom && dom.length > 0){
    //         dom[0].style.display = "flex";
    //         dom[0].style.alignItems = "center";
    //         dom[0].style.justifyContent = "center";
    //         dom[0].style.paddingBottom = "7px";
    //         dom[0].style.height = "20px";
    //         // dom[0].style.background = "red";
    //         // dom[0].style.fontSize = "15px";
    //         dom[0].style.fontWeight = "bold";
    //         dom[0].text = "︿";
    //     }
    // }

    // function isArrowExist() {
    //     let x = "jsmap2d-up-arrow";
    //     let dom = document.getElementsByClassName(x);
    //     console.log("==~~==~~==~~==~~==~~==~~==~~==~~==~~");
    //     console.log(dom);
    //     if(dom && dom.length > 0){
    //         return true;
    //     }
    //     return false;
    // }

    // function getDown() {
    //     let x = "jsmap2d-down-arrow";
    //     let dom = document.getElementsByClassName(x);
    //     console.log("==~~==~~==~~==~~==~~==~~==~~==~~==~~");
    //     console.log(dom);
    //     if(dom && dom.length > 0){
    //         dom[0].style.display = "flex";
    //         dom[0].style.alignItems = "center";
    //         dom[0].style.justifyContent = "center";
    //         dom[0].style.paddingTop = "7px";
    //         dom[0].style.height = "20px";
    //         // dom[0].style.background = "red";
    //         // dom[0].style.fontSize = "15px";
    //         dom[0].style.fontWeight = "bold";

    //         dom[0].text = "﹀";
    //     }
    // }

    // function leftBtnClicked() {
    //     console.log("1344");
    //     event.stopPropagation();
    //     console.log("134411");
    //     if (status == 0) {
    //         console.log('开始画了');
    //         status = 1;
    //         initDrawToolMode2();
    //         document.getElementById('v_btn').innerText = '结束';
    //     } else if (status == 1) {
    //         drawTool.stop();
    //         drawTool.destroy();
    //         console.log('结束画了');
    //         status = 2;
    //         document.getElementById('v_btn').innerText = '提交';
    //         document.getElementById('v_btn').style.background = "red";
    //         document.getElementById('re_paint_btn').style.display = "inline";
    //         console.log(document.getElementById('re_paint_btn').style.display);
    //     } else if (status == 2) {
    //         console.log('提交了');
    //         console.log(pointListResult);
    //         if (markWay === "addPoint") {
    //             console.log("singleResult",singleResult);
    //             let radius = document.getElementById("input_radius").value;
    //             if(singleResult){
    //                 singleResult.radius = radius;
    //             }
    //             uni.postMessage({
    //                 data: {
    //                     data: singleResult,
    //                     radius:radius
    //                 }
    //             })
    //         } else {
    //             uni.postMessage({
    //                 data: {
    //                     data: pointListResult
    //                 }
    //             })
    //         }
    //     } else if (status == 3) {
    //         if (markWay === 'addPoint') {
    //             console.log('提交了');
    //             console.log(singleResult);
    //             uni.postMessage({
    //                 data: {
    //                     data: singleResult
    //                 }
    //             })
    //         }
    //     }

    // }

    // function rightBtnClicked() {
    //     event.stopPropagation();

    //     // drawTool.clear();
    //     initDrawToolMode1();
    //     initDrawToolMode2();
    //     // drawTool.activate(currentDrawMode);


    //     singlePoint = {};
    //     singleResult = {};

    //     pointList = [];
    //     pointListResult = [];
    //     status = 0;

    //     if (markerAdded) {
    //         // map.removeMarker(markerAdded);
    //         map.removeAllImageMarker();
    //     }
    //     if (lineMarkerAdded) {
    //         map.removeAllPolygonMarker();
    //     }
    //     if (boxMarkerAdded) {
    //         map.removeAllPolygonMarker();
    //     }

    //     markerAdded = null;
    //     lineMarkerAdded = null;
    //     boxMarkerAdded = null;


    //     document.getElementById('v_btn').style.display = "inline";
    //     console.log('重画');
    //     document.getElementById('v_btn').style.background = "#0b6bb6";
    //     document.getElementById("v_btn").innerHTML = "开始画";
    //     document.getElementById('re_paint_btn').style.display = "none";

    // }

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    // function input_click() {
    //     event.stopPropagation();
    //     document.getElementById("input_radius").focus();
    // }

    // function back() {
    //     console.log("back");
    //     event.stopPropagation();
    //     let radius = document.getElementById("input_radius").value;
    //     console.log("radius",radius);
    //     if (markWay === "addPoint") {
    //         console.log("singleResult", singleResult);
    //         if(singleResult){
    //             singleResult.radius = radius;
    //         }
    //         uni.postMessage({
    //             data: {
    //                 back: true,
    //                 data: singleResult,
    //                 radius:radius
    //             }
    //         })
    //     } else {
    //         uni.postMessage({
    //             data: {
    //                 back: true,
    //                 data: pointListResult
    //             }
    //         })
    //     }
    // }

    function initDrawToolMode1() {
        if (markWay === "addPoint") {
            currentDrawMode = jsmaplight.JSDrawMode.POINT;
        } else if (markWay === "drawPolygon") {
            currentDrawMode = jsmaplight.JSDrawMode.POLYGON;
        }
        drawTool = new jsmaplight.JSDrawTool(map, {
            callback: (geometry) => {
                console.log("-----224------");
                drawTool.clear();
                drawTool.activate(currentDrawMode);
                if (!geometry) {
                    return;
                }
                let floorId = map.focusFloorId;
                let marker, color = '#00FFFF';

                console.log("geometry", geometry);
                console.log("geometry", geometry.x);
                console.log("geometry", geometry.y);
                console.log("geometry", geometry.z);

                if (geometry instanceof jsmaplight.JSPoint) {

                    pointList = [];
                    pointListResult = [];

                    singlePoint = new jsmaplight.JSPoint(geometry.x, geometry.y, geometry.z);


                    // pointList.push(new jsmaplight.JSPoint(geometry.x, geometry.y, geometry.z));

                    singleResult = {
                        "x": geometry.x,
                        "y": geometry.y,
                        "floorId": floorId
                    };

                    // pointListResult.push({
                    //     "x": geometry.x,
                    //     "y": geometry.y,
                    //     "floorId": floorId
                    // });

                    addImageMarker(floorId);
                    // addCircleMarker(floorId);
                }  else if (geometry instanceof jsmaplight.JSPolygon) {
                    console.log(geometry.points);
                    if(geometry && geometry.points && geometry.points.length > 0){
                        for(let i = 0; i < geometry.points.length;i++){
                            let point = geometry.points[i];
                            pointList.push(new jsmaplight.JSPoint(point.x, point.y, 0));
                            pointListResult.push({
                                "x": point.x,
                                "y": point.y,
                                "floorId": floorId
                            });
                        }
                    }
                    console.log("------0-9-00-0-0");
                    addPloygonMarker(floorId);
                    console.log("------0-9-00-0-0");
                }
                // map.addMarker(marker);
            }
        });
    }

    function initDrawToolMode2() {
        console.log("initDrawToolMode2", markWay);
        console.log("initDrawToolMode2", status);
        if (markWay === 'drawPolygon' && status != 1) {
            return;
        }
        if (markWay === "addPoint") {
            drawTool.activate(jsmaplight.JSDrawMode.POINT);
        } else if (markWay === "drawPolygon") {
            drawTool.activate(jsmaplight.JSDrawMode.POLYGON);
        }
    }

    function fetchJson() {
        console.log('fetchjson开始');
        // let url = "http://172.16.10.63:8888/17001/mapConfig.json";
        let url = `${mapServer}${buildId}/mapConfig.json`;
        console.log("fetchJsonUrl", url);
        fetch(url).then(response => response.json()
            .then(data => ({
                data: data,
                status: response.status
            })))
            .then((responseJSON) => {
                const { status, data } = responseJSON;
                console.info("_PARSE");
                console.info(JSON.stringify(responseJSON));
                console.info(responseJSON);
                return responseJSON;
            })
            .catch((e) => {
                console.error(e);
                document.getElementById('id_tip').style.display = "flex";
            })
    }

    // function getBroswer(){
    //     var sys = {};
    //     var ua = navigator.userAgent.toLowerCase();
    //     var s;
    //     (s = ua.match(/edge\/([\d.]+)/)) ? sys.edge = s[1] :
    //         (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? sys.ie = s[1] :
    //             (s = ua.match(/msie ([\d.]+)/)) ? sys.ie = s[1] :
    //                 (s = ua.match(/firefox\/([\d.]+)/)) ? sys.firefox = s[1] :
    //                     (s = ua.match(/chrome\/([\d.]+)/)) ? sys.chrome = s[1] :
    //                         (s = ua.match(/opera.([\d.]+)/)) ? sys.opera = s[1] :
    //                             (s = ua.match(/version\/([\d.]+).*safari/)) ? sys.safari = s[1] : 0;

    //     if (sys.edge) return { broswer : "Edge", version : sys.edge };
    //     if (sys.ie) return { broswer : "IE", version : sys.ie };
    //     if (sys.firefox) return { broswer : "Firefox", version : sys.firefox };
    //     if (sys.chrome) return { broswer : "Chrome", version : sys.chrome };
    //     if (sys.opera) return { broswer : "Opera", version : sys.opera };
    //     if (sys.safari) return { broswer : "Safari", version : sys.safari };

    //     return { broswer : "", version : "0" };
    // }

    // function test(){
    //     console.log("I am test");
    //     let fruits = ["Banana", "Orange", "Apple", "Mango"];
    //     // let x = fruits.entries();
    //     // for (const [key, value] of Object.entries(fruits)) {
    //     //     console.log(`${key}: ${value}`);
    //     // }
    //     // console.log("entries",x);

    //     const reduce = Function.bind.call(Function.call, Array.prototype.reduce);
    //     const isEnumerable = Function.bind.call(Function.call, Object.prototype.propertyIsEnumerable);
    //     const concat = Function.bind.call(Function.call, Array.prototype.concat);
    //     const keys = Reflect.ownKeys;
    //     if (!Object.entries) {
    //         Object.entries = function entries(O) {
    //             return reduce(keys(O), (e, k) => concat(e, typeof k === 'string' && isEnumerable(O, k) ? [[k, O[k]]] : []), []);
    //         };
    //         for (const [key, value] of Object.entries(fruits)) {
    //             console.log(`${key}: ${value}`);
    //         }
    //     }
    // }

    function xxx(value){
    	// console.log("aaa1");
     //    console.log(value.direction);
     //    console.log(value.data);
     //    console.log(value.data.code);
        addImageMarkers(value);
    }

    function addLineMarkers(xPoints){
       map.removeAllMarker();
       // for(let i = 0;i < points.length;i++){
       //  let item = points[i];
       //  var lineMarker = new jsmaplight.JSLineMarker({
       //      id: 'line',//id
       //      position: item,//坐标几何
       //      width: 10,//线宽
       //      floorId: 1,
       //      color: '#4058ff',//填充颜色
       //      properties: {
       //          test: 0
       //      },//属性设置
       //      callback: (marker) => {
       //          console.log(marker);
       //      }//回调
       //  });
       //  map.addMarker(lineMarker);
       // }
       add(xPoints);
    }

            //添加标注
            function add(xPoints) {
                var xxx = [{"floorId":1,"time":1624396663000,"x":118.990216255188,"y":33.366664003369884},{"floorId":1,"time":1624396663000,"x":118.98431539535524,"y":33.365642513985094}];

                var points2 = [{"floorId":1,"time":1624396663000,"x":118.98596438782151,"y":33.36553570270503},{"floorId":1,"time":1624396674000,"x":118.98596438782151,"y":33.36553570270503}];

                var points = [{"floorId":1,"time":1624396663000,"x":118.98596438782151,"y":33.36553570270503},{"floorId":1,"time":1624396664000,"x":118.98596438782151,"y":33.36553570270503},{"floorId":1,"time":1624396665000,"x":118.98596438782151,"y":33.36553570270503},{"floorId":1,"time":1624396666000,"x":118.98596438782151,"y":33.36553570270503},{"floorId":1,"time":1624396667000,"x":118.98596438782151,"y":33.36553570270503},{"floorId":1,"time":1624396668000,"x":118.98596438782151,"y":33.36553570270503},{"floorId":1,"time":1624396669000,"x":118.98596438782151,"y":33.36553570270503},{"floorId":1,"time":1624396670000,"x":118.98596438782151,"y":33.36553570270503},{"floorId":1,"time":1624396671000,"x":118.98596438782151,"y":33.36553570270503},{"floorId":1,"time":1624396672000,"x":118.98596438782151,"y":33.36553570270503},{"floorId":1,"time":1624396673000,"x":118.98596438782151,"y":33.36553570270503},{"floorId":1,"time":1624396674000,"x":118.98596438782151,"y":33.36553570270503}];



                console.log("234");
                    var groupPosition = [[{y: 31.264874801984956, x: 120.72767347097398,floorId:1},
                {y: 31.264965363236268, x: 120.72762519121171,floorId:1},
                {y: 31.265022680439014, x: 120.72759434580806,floorId:1},
                {y: 31.265078851263926, x: 120.72756484150888,floorId:1},
                {y: 31.265136168397767, x: 120.72755143046382,floorId:1},
                {y: 31.265182022079763, x: 120.72768151760103,floorId:1},
                {y: 31.265222144033228, x: 120.72784513235094,floorId:1},
                {y: 31.265217558667974, x: 120.72799533605578,floorId:1},
                {y: 31.26514763182035, x: 120.72802349925041,floorId:1},
                {y: 31.264998607218097, x: 120.72805032134059,floorId:1},
                {y: 31.26495046075784, x: 120.72802618145944,floorId:1},
                {y: 31.26489543620176, x: 120.72796717286111,floorId:1},
                {y: 31.26488397274854, x: 120.72788402438167,floorId:1},
                {y: 31.264996314530062, x: 120.72784781455995,floorId:1},
                {y: 31.2650467536538, x: 120.7278209924698,floorId:1}],
                [{x: 120.73172092437746,y: 31.26764318576585,floorId:1},
                {x: 120.73304057121278,y: 31.268037516225743,floorId:1},
                {x: 120.73342680931093,y: 31.267523969255862,floorId:1},
                {x: 120.73370039463043,y: 31.26651979344401,floorId:1},
                {x: 120.73231637477875,y: 31.26613004196241,floorId:1},
                {x: 120.73183894157411,y: 31.267207586249064,floorId:1}],
                [{x: 120.7266139984131,y: 31.268372237299722,floorId:1},
                {x: 120.72976827621461,y: 31.268445600664137,floorId:1},
                {x: 120.72970390319826,y: 31.2665748170529,floorId:1},
                {x: 120.72644233703615,y: 31.266281357434696,floorId:1},
                {x: 120.72582006454469,y: 31.26741850837147,floorId:1}]
            ];
                console.log("ere");
                // groupPosition.forEach((item,index) => {
                    // console.log(item);
                    // console.log(index);
                    var lineMarker = new jsmaplight.JSLineMarker({
                        id: 1,//id
                        floorId:1,
                        position: xPoints,//坐标几何
                        width: 1,//线宽
                        color: 'rgb(0,255,0)',//填充颜色
                        properties: {
                            test: 0
                        },//属性设置
                        callback: (marker) => {
                            console.log(marker);
                        }//回调
                    });
                    map.addMarker(lineMarker);
                    //创建option标签
                    // var option = document.createElement('option');
                    // option.value = index+1;
                    // option.innerText = `第${index+1}个线标注`;
                    // fragment.appendChild(option);
                    // markerArr.push(lineMarker);
                // })
            }
</script>

<style type="text/css">
    html,
    body,
    #mapContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        display: flex;
        background: red;
    }

    .operation_layout {
        width: 100%;
        height: 40px;
        position: absolute;
        bottom: 20px;
        margin-bottom: 10px;
        margin-left: 150px;
        display: none;
        align-items: center;
        justify-content: left;
        align-content: center;
        z-index: 999 !important;
    }

    .btn {
        width: 100px;
        height: 40px;
        margin-left: 20px;
        background: #0b6bb6;
        /*opacity: 0.65;*/
        color: white;
        font-size: 12px;
        line-height: 40px;
        border-radius: 12px;
        align-content: center;
        text-align: center;
    }

    .back {
        position: absolute;
        width: 50px;
        height: 50px;
        justify-content: center;
        align-items: center;
        display: flex;
        margin-left: 40px;
        margin-top: 40px;
        font-size: small;
        background: #cccccc;
        opacity: 0.9;
        z-index: 999 !important;
        border-radius: 50%;
    }

    .input {
        position: absolute;
        width: 150px;
        height: 50px;
        justify-content: center;
        align-items: center;
        display: none;
        margin-left: 180px;
        background: #cccccc;
        margin-top: 40px;
        font-size: small;
        opacity: 0.9;
        z-index: 999 !important;
    }

    .back_img{
        width: 14px;
        height: 23px;
    }

    .back h1 {
        left: 50%;
        top: 50%;
    }

    /*.jsmap2d-svgPath-svg {*/
    /*    position: absolute;*/
    /*    top: 28px;*/
    /*    left: 28px;*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    overflow: hidden*/
    /*}*/


    /* element.style {
    }
    .leaflet-touch .leaflet-bar a:first-child {
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
    } */

    /*.leaflet-control-zoom-in, .leaflet-control-zoom-out {*/
    /*    font: 700 28px Lucida Console, Monaco, monospace;*/
    /*    font-size: 150px;*/
    /*    text-indent: 1px*/
    /*}*/

    /*.leaflet-touch .leaflet-bar a {*/
    /*    width: 93px;*/
    /*    height: 90px;*/
    /*    line-height: 90px;*/
    /*    font-weight: 900;*/
    /*    font-size: xx-large;*/
    /*    align-content: center;*/
    /*}*/


    .jsmap2d-bar a, .jsmap2d-bar a:hover {
        background-color: #aaeeffba;
        border-bottom: 1px solid rgba(26, 86, 255, .42);
        /*width: 93px;*/
        /*height: 90px;*/
        /*line-height: 90px;*/
        /*font-weight: 900;*/
        display: block;
        text-align: center;
        text-decoration: none;
        /*font-size: large;*/
        /*color: #000*/
    }

    .tip {
        display: none;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        align-items: center;
        justify-content: center;
    }

    .tip-content{
        font-size: 15px;
        font-weight: bold;
    }

    .radius-label{
        font-size: 25px
    }
    .radius{
        width: 50px;
        height: 30px;
        font-size: 25px
    }
</style>